<template>
  <div class="index">
    <el-row class="container">
      <Aside></Aside>
      <router-view />
    </el-row>
  </div>
</template>

<script>
import Header from "../components/Header";
import Aside from "../components/Aside";
import jwt_decode from "jwt-decode";
import { mapActions } from "vuex";

export default {
  data() {
    return {};
  },
  components: {
    Header,
    Aside
  },
  created() {
    // 解析token
    if (localStorage.token) {
      // 通过jwt-decode 解析token， token中有 id
      const decodeInfo = jwt_decode(localStorage.token);
      // 在vuex中设置 登录状态和用户信息
      this.setLoginStatus(!this.isEmpty(decodeInfo));
      this.setUserInfo(decodeInfo);
    }
  },
  methods: {
    // 映射store中的actions
    ...mapActions(["setLoginStatus", "setUserInfo"]),
    isEmpty(value) {
      return (
        value === undefined ||
        value === null ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (typeof value === "string" && value.trim().length === 0)
      );
    }
  }
};
</script>
<style lang='scss' scoped>
.index {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>